import React from 'react';
import Message from 'antd/lib/message';

export default class Survey extends React.Component{
    constructor(props, context) {
        super(props, context)
        let answers = {};
        this.props.survey.Questions.map( function(item) {
            if (item.QuestionType != 5) 
                answers[item.Id+''] = {};
        });
        this.answers = answers;
    }

    isNullObject(obj) {
        for (let key in obj) {
            console.log(key);
            return false;
        }
        return true;
    }
    
    handlePostSurvey(){
        let ret = [];
        for (let i =0; i<this.props.survey.Questions.length; i++) {
            let question = this.props.survey.Questions[i];
            if (question.QuestionType != 5) {
                let questionAnswer = {};
                if (question.Required && this.isNullObject(this.answers[question.Id]) ) {
                    Message.error('请填写带*号的必填项!');
                    return false;
                } else {
                    if (this.answers[question.Id].length == undefined)
                        continue;
                    questionAnswer["Id"] = question.Id;
                    if (question.QuestionType == 1) {
                        let arr = [];
                        for (let obj in this.answers[question.Id]) {
                            arr.push(obj);
                        }
                        questionAnswer["AnswerValue"] = arr.join(',');
                    } else {
                        questionAnswer["AnswerValue"] = this.answers[question.Id];
                    }
                    ret.push(questionAnswer);
                }
            }
        }
        this.props.handlePostSurvey(ret);
        
    }
    componentDidMount() {
        let surveyBody = '';
        let surveyDom = document.getElementById('survey-container');
        if (this.props.survey != null) {
            let questionindex = 0;
            let questions = this.props.survey.Questions;
            for (let i=0 ;i< questions.length; i++) {
                let question = questions[i];
                surveyBody += '<div>';
                surveyBody += this.questionName(question.QuestionType, questionindex + 1, question.Name);
                surveyBody += this.isRequired(question.Required);
                if (question.QuestionType == 0) {
                    for (let answerIndex=0; answerIndex < question.Anwsers.length; answerIndex++) {
                        let answer = question.Anwsers[answerIndex];
                        surveyBody = surveyBody 
                        +'<label style="display: block; margin-left: 0px" questionType="'+question.QuestionType+'" answerid="'+answer.Id+'" type="radio" index="'+question.Id+'">' 
                        +'<i class="fa fa-circle-thin" style="font-size:1.2rem;margin:0.2rem 0rem 0rem 0rem;" aria-hidden="true"></i>'
                        +'<p style="position:absolute;top:0.5rem;margin-left:1.5rem;">' + answer.Name + '</p>'
                        +'</label>';
                    }
                } else if (question.QuestionType == 7) {
                    for (let answerIndex=0; answerIndex < question.Anwsers.length; answerIndex++) {
                        let answer = question.Anwsers[answerIndex];
                        surveyBody = surveyBody 
                        +'<label style="display: block; margin-left: 0px" questionType="'+question.QuestionType+'" answerid="'+answer.Id+'" type="radio" index="'+question.Id+'">' 
                        +'<i class="fa fa-circle-thin" style="font-size:1.2rem;margin:0.2rem 0rem 0rem 0rem;" aria-hidden="true"></i>'
                        +'<p style="position:absolute;top:0.5rem;margin-left:1.5rem;">' + answer.Name + '</p>'
                        +'</label>';
                    }
                    surveyBody += '<input index="'+question.Id+'" answerid="'+question.Anwsers.length+'" style="display:none;outline:none;border:1px solid #e6e6e6;width: 60%;margin-left:0.9rem"></input>'
                } else if (question.QuestionType == 1) {
                    for (let answerIndex=0; answerIndex < question.Anwsers.length; answerIndex++) {
                        let answer = question.Anwsers[answerIndex];
                        surveyBody = surveyBody 
                        +'<label style="display: block; margin-left: 0px" questionType="'+question.QuestionType+'" answerid="'+answer.Id+'" type="check" index="'+question.Id+'">' 
                        +'<i class="fa fa-square-o" style="font-size:1.2rem;margin:0.2rem 0rem 0rem 0rem;" aria-hidden="true"></i>'
                        +'<p style="position:absolute;top:0.5rem;margin-left:1.5rem;">' + answer.Name + '</p>'
                        +'</label>';
                    }
                } else if (question.QuestionType == 2) {
                    surveyBody += '<textarea index="'+question.Id+'" style="margin-bottom:0.5rem;border:1px solid #eee;resize:none;width:100%;outline:none;border-radius: 5px;" rows="3" } ></textarea>';
                } else if (question.QuestionType == 6) {
                    surveyBody += '<div>';
                    for (let answerIndex=0; answerIndex < question.Anwsers.length; answerIndex++) {
                        let answer = question.Anwsers[answerIndex];
                        surveyBody += '<div type="star" answerid="'+answer.Id+'" index="'+question.Id+'" class="fa star fa-star-o" ></div>';
                    }
                    surveyBody += '</div>';
                } 
                surveyBody += '</div>';
                questionindex++;
            }
            if (sessionStorage.token == undefined) {
                surveyBody += '<div style="text-align: center;margin-bottom:1rem;"><a id="bottom-btn" href="'+this.props.redirecthref+'" className="btn btn-success btn-block btn-ran-0" style="display: block;margin: 0 10%;width: 80%;margin-top: 0.5rem;font-size: 1.2rem;">请先登录</a></div>';
            } else {
                surveyBody += '<button id="bottom-btn" className="btn btn-success btn-block btn-ran-0" style="margin-top: 0.5rem;width: 100%;font-size: 1.2rem;">提交</button>';
            }
            surveyDom.innerHTML = surveyBody;
            if (sessionStorage.token != undefined) {
                let surveyBtn = document.getElementById('bottom-btn');
                surveyBtn.onclick = this.handlePostSurvey.bind(this);
            }
            let surveyRadio = document.querySelectorAll('label[type=radio]');
            this.addEventListenerForAll(surveyRadio, this.radioClickHandler.bind(this), 'onclick');
            let surveyCheck = document.querySelectorAll('label[type=check]');
            this.addEventListenerForAll(surveyCheck, this.checkBoxClickHandler.bind(this), 'onclick');
            let surveyText = document.querySelectorAll('textarea');
            this.addEventListenerForAll(surveyText, this.textHandler.bind(this), 'onblur');
            let surveyStar = document.querySelectorAll('div[type=star]');
            this.addEventListenerForAll(surveyStar, this.starHandler.bind(this), 'onclick');
        }
    }

    addEventListenerForAll( elements, callback, action) {
        for ( let i = 0; i < elements.length; i++) {
            let element = elements[i];
            element[action] = callback;
        }
    }

    starHandler(e) {
        let focusNode = e.target;
        if (focusNode.nodeName.toLowerCase() != 'div') {
            focusNode = focusNode.parentNode;
        }
        let questionId = focusNode.getAttribute("index");
        let answerid = focusNode.getAttribute("answerid");
        let starGroup = document.querySelectorAll('div[type="star"][index="'+questionId+'"]');
        for (let i=0; i< starGroup.length; i++) {
            let star = starGroup[i];
            let starid = star.getAttribute("answerid");
            if ( starid <= answerid) {
                star.className = 'fa star fa-star';
            } else {
                star.className = 'fa star fa-star-o';
            }
            this.answers[questionId+'']=answerid;
        }
    }

    radioClickHandler(e) {
        let focusNode = e.target;
        if (focusNode.nodeName.toLowerCase() != 'label') {
            focusNode = focusNode.parentNode;
        }
        let questionType = focusNode.getAttribute("questionType");
        let questionId = focusNode.getAttribute("index");
        let answerid = focusNode.getAttribute("answerid");
        let radioGroup = document.querySelectorAll('label[type="radio"][index="'+questionId+'"]');
        for (let i=0; i< radioGroup.length; i++) {
            let radio = radioGroup[i];
            let radioid = radio.getAttribute("answerid");
            let iElement = radio.querySelector('i');
            if (radioid+'' == answerid+'') {
                iElement.style.color='rgb(45,183,245)';
                iElement.className= 'fa fa-dot-circle-o';
                this.answers[questionId+'']=radioid;
                if (questionType+'' == '7') {
                    let inputElement = document.querySelector('input[index="'+questionId+'"]');
                    inputElement.style.display = "block";
                    let context = this;
                    inputElement.onblur = function(e) {
                        let element = e.target;
                        let  id= element.getAttribute("index");
                        let  answserId= element.getAttribute("answerid");
                        context.answers[id+''] = answserId+","+element.value;
                    }
                }
            } else {
                iElement.className= 'fa fa-circle-thin';
                iElement.style.color='black';
                if (questionType+'' == '7') {
                    let inputElement = document.querySelector('input[index="'+questionId+'"]');
                    inputElement.style.display = "none";
                }
            }
        }
    }

    checkBoxClickHandler(e) {
        let focusNode = e.target;
        if (focusNode.nodeName.toLowerCase() != 'label') {
            focusNode = focusNode.parentNode;
        }
        let questionType = focusNode.getAttribute("questionType");
        let questionId = focusNode.getAttribute("index");
        let answerid = focusNode.getAttribute("answerid");
        let checkGroup = document.querySelectorAll('label[type="check"][index="'+questionId+'"]');
        for (let i=0; i< checkGroup.length; i++) {
            let check = checkGroup[i];
            let checkid = check.getAttribute("answerid");
            let iElement = check.querySelector('i');
            if (checkid == answerid) {
                if (this.answers[questionId][checkid] != '1') {
                    iElement.className= 'fa fa-check-square';
                    this.answers[questionId][checkid] = '1';
                    iElement.style.color='rgb(45,183,245)';
                } else {
                    iElement.className= 'fa fa-square-o';
                    this.answers[questionId][checkid] = undefined;
                    iElement.style.color='black';
                }
            }
        }
    }

    textHandler(e) {
        let focusNode = e.target;
        if (focusNode.nodeName.toLowerCase() != 'textarea') {
            focusNode = focusNode.parentNode;
        }
        let questionId = focusNode.getAttribute("index");
        this.answers[questionId] = focusNode.value;
    }

    questionName(type, index, name) {
        if (type == 5) {
            return '<strong style="text-transform:capitalize">' + name + '</strong>';
        } else {
            return '<strong>' + index + '.' + name +'</strong>';
        }
    }

    isRequired(isRequired) {
        if (isRequired) {
            return '<strong style="color:red">＊</strong>';
        } else {
            return '';
        }
    }
    render(){
        return( 
            <div id="survey-container" className="survey-container">
                
            </div>
        );
    }
}